<div class="bjui-pageContent">
    <form action="{:U('edit')}" data-toggle="validate" data-alertmsg="false" enctype="multipart/form-data" method="post">
        <input type="hidden" name="id" value="{:I('id')}">
        <table class="table table-condensed table-hover" width="100%">
            <tbody>
                
                <tr>
                    <td colspan="4">
                        <label class="control-label">商品名称：</label>
                        <input type="text" name="name" value="{$arr.name}">
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">商品货号：</label>
                        <input type="text" name="sn" value="{$arr.sn}">
                        <code>不填写, 默认为商品名称, 货号不可重复</code>
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">商品条形码：</label>
                        <input type="text" name="bar_code" value="{$arr.bar_code}">
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">品牌分类属性：</label>
                        <select name="brand_id" data-toggle="selectpicker" data-rule="required">
                            <option value="">请选择品牌</option>
                            <?php foreach($brandList as $brand):?>
                            <option value="{$brand.brand_id}" <?php echo $arr['brand_id']==$brand['brand_id'] ? "selected='true'" : "";?>>{$brand.brand_name}</option>
                            <?php endforeach;?>
                        </select>
                        <select name="category_id" data-toggle="selectpicker" data-rule="required">
                            <option value="">请选择分类</option>
                            <?php foreach($categoryList as $category):?>
                            <option value="{$category.id}" <?php echo $arr['category_id']==$category['id'] ? "selected='true'" : "";?>>{$category.title_show}</option>
                            <?php endforeach;?>
                        </select>
                        <select name="attribute_id" data-toggle="selectpicker" data-rule="required">
                            <option value="">请选择属性</option>
                            <?php foreach($attributeList as $attribute):?>
                            <option value="{$attribute.id}" <?php echo $arr['attribute_id']==$attribute['id'] ? "selected='true'" : "";?>>{$attribute.name}</option>
                            <?php endforeach;?>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">商品市场价：</label>
                        <input type="text" name="price" value="{$arr.price}" data-rule="number">元
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">单位：</label>
                        <input type="text" name="unit" value="{$arr.unit}">
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">商品上下架：</label>
                        <select name="status" data-toggle="selectpicker" data-rule="required">
                            <option value="{$Think.GOODS_UP_STATUS}" <?php echo $arr['status']==GOODS_UP_STATUS ? "selected='true'" : "";?>>上架</option>
                            <option value="{$Think.GOODS_DROP_STATUS}" <?php echo $arr['status']==GOODS_DROP_STATUS ? "selected='true'" : "";?>>下架</option>
                        </select>
                    </td>
                </tr>
                
                <tr>
                    <td colspan="4">
                        <label class="control-label">商品小图：</label>
                        <img src="{$arr.img} " onerror="this.src=''" style="max-width:300px;max-height:300px;">
                        <input type="file" name="img" date-rule="required">
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">颜色：(可选)</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" id="color">
                        <div>
                        <?php if($colorList)for($i=0; $i<count($colorList); $i++):?>
                            <?php echo $i>0 && $i%9==0 ? '</div><div>' : '';?>
                            <label for="color{$colorList[$i]['id']}" style="cursor: pointer; width:100px;">
                                <input type="checkbox" id="color{$colorList[$i]['id']}"  dataJson='{:json_encode($colorList[$i])}'>                            
                                <span style="width: 12px; height: 12px; border: 1px solid #333333; display: inline-block;background-color: {$colorList[$i]['color_code']}"></span>
                                <span style="padding-left: 3px;">{$colorList[$i]['color_name']}</span>
                            </label>
                        <?php endfor;?>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan="4">
                        <label class="control-label">规格：(可选)</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" id="spec">
                        <div>
                        <?php if($specList)for($i=0; $i<count($specList); $i++):?>
                            <?php echo $i>0 && $i/1 ? '</div><div>' : '';?>
                            <label for="spec{$specList[$i]['id']}" class="control-label x80" style="cursor: pointer">
                                <input type="checkbox" id="spec{$specList[$i]['id']}" dataJson='{:json_encode($specList[$i])}'>
                                <span style="padding-left: 3px;">{$specList[$i]['name']}</span>
                            </label>
                        <?php endfor;?>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <button id="addBarCode" data-icon="plus" class="btn btn-green" type="button">添加/生成条码</button>
                    </td>
                </tr>
                
                <tr>
                    <td id="barCodeContent" colspan="4">
                        
                    </td>
                </tr>

                <!-- 待编辑条码数据 -->
                <tr>
                    <td>
                        <label class="control-label">已生成的条码：</label>
                    </td>
                </tr>
                <?php foreach($oldBarList as $key=>$oldBar):?>
                <tr>
                    <td>

                        <input type="text" name="oldBarList[{$key}][sort]" value="{$oldBar['sort']}">
                        <input type="text" name="oldBarList[{$key}][color_name]" value="{$oldBar['color_name']}">
                        <input type="text" name="oldBarList[{$key}][spec_name]" value="{$oldBar['spec_name']}">
                        <input type="text" name="oldBarList[{$key}][bar_code]" value="{$oldBar['bar_code']}">
                    </td>
                        <input type="hidden" name="oldBarList[{$key}][id]" value="{$oldBar['id']}">
                </tr>
                <?php endforeach;?>
                <!-- END待编辑条码数据 -->
            </tbody>
        </table>
    </form>
</div>
<div class="bjui-pageFooter">
    <ul>
        <!-- <li><a data-confirm-msg="确定要标记失败订单吗" data-toggle="doajax" class="btn btn-default" href="{:U('fail?orderId='.$arr['order_id'])}">失败</a></li> -->
        <!-- <li><a href="{:U('failEdit?orderId='.$arr['order_id'])}" class="btn btn-default" data-toggle="dialog" data-id="dialog-normal" data-mask="true" data-title="{$arr.order_sn}-标记失败">失败</a></li> -->
        <li><button type="button" class="btn-close" data-icon="close">取消</button></li>
        <li><button type="submit" class="btn-blue" data-icon="save">保存</button></li>
    </ul>
</div>

<!-- 条码数据 -->
<script id="barCodeTemplate" type="text/html">
    <tr>
        <td>
            <input type="text" value="0" name="barList[<%=i%>][sort]"></td>
        <td>
            <input type="text" value="<%=color_name%>" name="barList[<%=i%>][color_name]" style="text-align:center;"> 
            <input type="hidden" value="<%=color_id%>" name="barList[<%=i%>][color_id]"> 
        <td>
            <input type="text" value="<%=spec_name%>" name="barList[<%=i%>][spec_name]" style="text-align:center;">
            <input type="hidden" value="<%=spec_id%>" name="barList[<%=i%>][spec_id]">
        </td>
        <td><input type="text" value="<%=goods_name%><%=color_num%><%=spec_code%>" name="barList[<%=i%>][bar_code]" style="text-align:center;"></td>
        <td>
            <a title="删除" class="btn btn-red" href="javascript:void(0);" onclick="javascript:delBarCode(this);">删除</a>
        </td>
    </tr>
</script>

<!-- 规格选项 -->
<script id="specTemplate" type="text/html">
    <div>
        <label style="cursor: pointer" class="control-label x80" for="spec<%=id%>">
            <input type="checkbox" datajson='{"id":"<%=id%>","name":"<%=name%>","sort":"<%=sort%>","code":"<%=code%>","group_id":"<%=group_id%>"}' id="spec<%=id%>">    
            <span style="padding-left: 3px;"><%=name%></span>
        </label>
    </div>
</script>

<script>
    /**
     * [添加/生成条码]
     * @param  {Array}  ){                     var data [description]
     * @return {[type]}     [description]
     */
    $(".in #addBarCode").click(function(){
        var data = [];      // 颜色, 颜色id, 规格, 规格id
        /* START数据初始化 */
        data['goods_name']=$(".in input[name=name]").val();
        data['color_id']='';
        data['color_name']='无';
        data['color_num']='';
        data['spec_id']='';
        data['spec_name']='无';
        data['spec_code']='';
        /* END--数据初始化 */
        $(".in #barCodeContent").html('');  // 清空条码生成区内容
        if(!data['goods_name']){
            $(this).alertmsg('warn', '您的商品名称不能为空！');
            return;
        }
        var colorList = $(".in #color input[type=checkbox]:checked");
        var specList = $(".in #spec input[type=checkbox]:checked");
        if(colorList.length==0 && specList.length>0){
            specList.each(function(i){
                var jsonData = $(this).attr('dataJson');
                eval("var sepcData = "+jsonData);
                data['i']=i.toString();
                data['spec_id']=sepcData['id'];
                data['spec_name']=sepcData['name'];
                data['spec_code']=sepcData['code'];
                var html = template('barCodeTemplate', data);
                $(".in #barCodeContent").append(html);
            })
        }else if(colorList.length>0 && specList.length==0){
            colorList.each(function(i){
                var jsonData = $(this).attr('dataJson');
                eval("var colorData = "+jsonData);
                data['i']=i.toString();
                data['color_id']=colorData['id'];
                data['color_name']=colorData['color_name'];
                data['color_num']=colorData['color_num'];
                var html = template('barCodeTemplate', data);
                $(".in #barCodeContent").append(html);
            })
        }else if(colorList.length==0 && specList.length==0){
            data['i']='0';
            var html = template('barCodeTemplate', data);
            $(".in #barCodeContent").append(html);
        }else if(colorList.length>0 && specList.length>0){
            colorList.each(function(i){
                console.log(i);
                var jsonData = $(this).attr('dataJson');
                eval("var colorData = "+jsonData);
                data['color_id']=colorData['id'];
                data['color_name']=colorData['color_name'];
                data['color_num']=colorData['color_num'];
                specList.each(function(j){
                    var jsonData = $(this).attr('dataJson');
                    eval("var sepcData = "+jsonData);
                    data['i']=i.toString()+j.toString();
                    console.log(data['i']);
                    data['spec_id']=sepcData['id'];
                    data['spec_name']=sepcData['name'];
                    data['spec_code']=sepcData['code'];
                    var html = template('barCodeTemplate', data);
                    $(".in #barCodeContent").append(html);
                })
            })
        }
    }) 
    /**
     * [delBarCode 删除条码数据]
     * @param  {[type]} obj [description]
     * @return {[type]}     [description]
     */
    function delBarCode(obj){
        $(obj).parent().parent().remove();
    }

    /**
     * [选择分类对应的规格选项]
     * @param  {Object} ){                     var data [description]
     * @return {[type]}     [description]
     */
    $(".in select[name=category_id]").change(function(){
        var data = {};
        data['categoryId'] = $(this).val();
        $.ajax({
            type: "POST",
            url: "{:U('ajaxGetSpec')}",
            data: data,
            dataType: "json",
            success:function(data){
                $(".in #spec").html('');
                for(var i in data){
                    if(typeof data[i] != 'object'){
                        continue;
                    }
                    var html = template('specTemplate', data[i]);
                    $(".in #spec").append(html);
                }
            }
        });
    })

</script>
